<template>
  <div style="height: 100%;">
    <x-header :left-options="{backText: ''}">{{directory == "10383" ? '项目新闻' : '项目公告'}}</x-header>
    <simple-search @onSearch="search" :placeholder="'输入名称搜索'">
    </simple-search>
    <!-- <custom-select :></custom-select> -->
    <div class="main-container">
      <scroller :on-refresh="refresh" :on-infinite="infinite">
        <!-- content -->
        <div >
          <div v-for="(item, i) in list" :key="i" class="card" @click="openInfo(item)">
            <div class="title"><div class="bar"></div>{{item.TITLE}}</div>

            <!-- <div class="num" v-html='item.CONTENT'>
              <div class="gray-label">子节点已检验个数</div>
              {{item.CHECKNUM || '0'}}
            </div> -->
            <!-- <div class="num">
              <div class="gray-label">子节点总数</div>
              {{item.COUNTNUM || '0'}}
            </div> -->
          </div>
        </div>
      </scroller>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "qualityList",
  components: {},
  created() {
    let directory = this.$router.currentRoute.query.directory
    console.log(directory)
  },
  mounted () { },
  data () {
    return {
      list: [],
      newList: [],
      page: 0,
      keyword: '',
      createPop: false,//弹出层是否创建
      loading: false,//下拉刷新时禁止无限加载
    }
  },
  methods: {

    getData(callback, failed) {
      
      var params = {
        MiniQueryFormData: '{"TITLE":"' + this.keyword + '","DEPARTMENT":"","DATETIME1":"","DATETIME2":""}',
        pageIndex: this.page,
        pageSize: 5,
        sortField: "DATETIME",
        sortOrder: "desc",
      }
      // params = JSON.stringify(params)
      this.$ajax({
        method: 'post',
        url: this.COMMON_URL+'?_method=CMS_COMMON.getDataList&tableName=CMS_INFORMATION&directory=' + this.directory,
        data: params
      }).then((res) => {
        console.log(res)
        callback(res)
      }).catch(err => {
        failed()
      })
    },
    openInfo(item) {
      this.$store.commit('SET_CURRENT_ROW', item);
      this.$router.push({name: 'nnInfo'})  //, query:{state: item.STATE}
    },
    infinite(done) {//上划加载方法
      console.log("infinite");
      console.log(this.page);console.log(this.viewId);
      if(this.loading) {
        done();//TODO 啥意思
      } else {
        this.getData((res) => {
            //res.data.datas中的字段都是大写的，res.data.data中的字段有小写的
            if (res.status == '200' && res.data.data.length > 0) {
              this.list = [...this.list, ...res.data.data]//TODO 啥意思
              this.page++;
              done()
            } else {
              done(true)//有错误的情况或者没有记录，传参true
            }
          }, () => {
            done(true)
        });
      }
    },
    refresh(done) {
      this.page = 0;
      console.log("refresh");
      console.log(this.page);
      this.loading = true;
      this.getData((res) => {
        if (res.status == '200' && res.data.data.length > 0) {
          this.list = [...res.data.data];
          this.page++;
          done()
        } else {
          done(true);
        }
        this.loading = false;
      }, () => {
          done(true);
      });
    },
    search(val) {
      this.page = 0;
      this.keyword = val;
      this.getData((res) => {
        if (res.status == '200' && res.data.data.length > 0) {
          this.list = [...res.data.data];
          this.page++;
        } else {
          this.list = [];
        }
      }, () => {
        this.list = [];
      });
    },
    
    close() {
      this.show = false;
      this.show1 = false
    }
  },
  computed: {
    // userInfo () {
    //   return this.$store.state.user
    // },
    // mainPop () {
    //   return this.$store.state.mainPop
    // }
    directory() {
      let str = this.$router.currentRoute.query.directory
      str = str.substring(0, str.length - 1)
      return str
    } 
  },
  watch: {
    '$route' (newR, oldR) {
      if(this.$store.state.needRefresh){
        this.refresh()
        this.$store.commit("needRefreshStatus",false)
      }
    },
  }
}
</script>

<style scoped>
  .card {
    background: #fff;
    /* margin: 10px 16px; */
    padding: 19px;
    border-radius: 4px;
    overflow: hidden;
    border-bottom: 1px solid #A7AEFF
  }

  .card-title {
    font-size: 18px;
  }
  .warning {
    color: red;
    padding: 0 5px;
    background-color: pink;
    text-align: center;
    width: 140px;
    line-height: 30px;
    font-size: 14px;
  }

  .gray-label {
    color: #9F9F9F;
    width: 155px;
  }
  .select{
    width: 100%;
    box-sizing: border-box;
    display: flex;
  }
  .active{
    background: #242B80;
    color: #fff;
  }
  .title{
    display: flex;
    align-items: center;
    font-size: 16px
  }
  .bar{
    width: 3px;
    height: 13px;
    background: #A7AEFF;
    margin-right: 13px;
  }
  .num{
    display: flex;
    font-size: 14px;
    color: #343434;
    margin-left: 16px;
    margin-top: 14px;
  }
  .state{
    font-size: 11px;
    margin-top: 15px;
    margin-left: 23px;
  }
  .class1{
    color: #F32111
  }
  .class2{
    color: #FF6E04
  }
  .class3{
    color: #61AE82
  }
  .class4{
    color: #3C82F6
  }
  button{
    height: 40px;
    border: 0
  }
  ul{
    position: absolute;
    background: #fff;
    width: 50%;
    z-index: 2;
  }
  ul li{
    margin: 0 !important;
    height: 35px;
    line-height: 35px;
    z-index: 2;
    padding-left: 10px
  }
  .mask{
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: 0.6;
    z-index: 1
  }
  .slide-enter-active {
    transition: all .3s ease;
  }
  .slide-leave-active {
    transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-enter, .slide-leave-to{
    transform: translateX(-100%);
    opacity: 0;
  }
</style>
